<template>
  <div class="cargo-wrapper" :style="position">
    <img class="cargo-icon" :src="showImg" />
  </div>
</template>

<script setup lang="ts">
import cargoImg from '@/assets/cargo.png';
import cargoOnTargetImg from '@/assets/cargo_on_target.png';
import { usePosition } from '@/hooks/usePosition';
import { cssWidthHeight } from '@/constants';
import { computed } from 'vue';
import type { Cargo } from '@/stores/cargo';
interface Props {
  cargo: Cargo;
}

const { cargo } = defineProps<Props>();

const showImg = computed(() => {
  return cargo.status ? cargoOnTargetImg : cargoImg;
});

const { position } = usePosition(cargo);
</script>
<style lang="scss" scoped>
.cargo-wrapper {
  position: absolute;
  .cargo-icon {
    width: v-bind(cssWidthHeight);
    height: v-bind(cssWidthHeight);
  }
}
</style>
